<template>
  <!-- 常规登录 -->
  <div>
    
    <el-form-item label="用户名" prop="username">
      <el-input
        type="text"
        v-model="ruleForm.username"
        autocomplete="off"
      ></el-input>
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="ruleForm.password"></el-input>
    </el-form-item>

    <el-form-item label="验证码" prop="captcha">
      <el-input class="captcha" v-model="ruleForm.captcha" ></el-input>
      <span class="captcha-svg" v-loading="loading">
        <i  class="captcha-svg" v-html="captcha" @click="getCaptcha" ></i>
      </span>
      
    </el-form-item>

    <el-form-item>
      <el-button class="submit" type="primary" @click="submitForm"
        >提交</el-button
      >
    </el-form-item>

    <p>
      <svg class="icon iphone" aria-hidden="true" @click="typeSms">
        <use xlink:href="#icon-shouji-yijia9pro-zuhe"></use>
      </svg>
      <a class="inline-block" @click="typeSms">切换短信登入</a>
    </p>

    <svg class="icon erweima" aria-hidden="true" @click="typeQr">
      <use xlink:href="#icon-erweima"></use>
    </svg>
  </div>
</template>

<script>
import * as api from "@/api/users";
export default {
  created() {
    this.getCaptcha()
  },
  data() {
    return {
      loading:false,
      captcha:"",
      ruleForm: {
        username: "",
        password: "",
        captcha: "",
      },
    };
  },
  watch: {
    ruleForm: {
      handler(newVal) {
        
        this.$emit("syncLoginForm", newVal);
      },
      deep: true,
    },
  },
  methods: {
    submitForm() {
      this.$emit("submitForm");
    },
    getCaptcha() {
      this.loading=true
      api.getCaptcha().then((res) => {
        // console.log(res);
        this.captcha = res.data.img
        this.loading=false
      });
    },
    typeQr(){
      this.$emit("typeQr")
    },
    typeSms(){
      this.$emit("typeSms")
    }
  },
};
</script>
<style lang="less" scoped>

.erweima {
  font-size: 80px;
  color: #ccc;
  position: absolute;
  right: -8px;
  top: -8px;
  opacity: 0.7;
  cursor: pointer;
}
/deep/.el-form-item__label {
  color: #fff;
  vertical-align: middle;
}
p .iphone {
  font-size: 28px;
}
a {
  color: #fff;
}
p {
  text-align: center;
}

.el-form-item .submit {
  width: 300px;
  background-image: linear-gradient(to right, red, blue);
}
.el-input {
  /deep/ .el-input__inner {
    width: 300px;
  }
}
.el-button-primary span {
  display: inline-block;
  width: 500px;
}
/deep/.captcha .el-input__inner {
  width: 150px;
  height: 45px;
  vertical-align: top;
  border-radius: 5px 0 0 5px;
  border: 0;
}
/deep/.captcha.el-input {
  width: 150px;
  height: 45px;
}

.captcha-svg {
  width: 150px;
  height: 45px;
  background-color: #fff;
  display: inline-block;
  border-radius: 0 5px 5px 0;
  text-align: center;
  vertical-align:top;
  cursor: pointer;

}
.inline-block{
  display: inline-block;
}
</style>